<template>
    <div class="order">
        <div class="order_price">付金额<b>￥{{calculations.price}}</b></div>
        <div class="order_btn" @click="handleShowConfirmChange(true)">提交订单</div>
    </div>
    <div class="mask" v-show="showConfirm" @click="handleShowConfirmChange(false)">
        <div class="mask_content">
            <h3 class="mask_content_title" @click.stop>确认离开收银台吗?</h3>
            <p class="mask_content_desc">请尽快完成支付,否则将被取消</p>
            <div class="mask_content_btns">
                <div class="mask_content_btn mask_content_btn--first" @click="handleConfirmOrder(true)">取消订单</div>
                <div class="mask_content_btn mask_content_btn--last" @click="handleConfirmOrder(false)">确认支付</div>
            </div>
        </div>
    </div>
    <Toast v-if="show" :message="toastMessage"/>    
</template>

<script>
import { useCommonCartEffect } from '../../effects/cartEffects';    
import { useRoute, useRouter } from 'vue-router';
import Toast,{ useToastEffect } from '../../components/Toast.vue'
import { post } from '@/untils/request'
import { useStore } from 'vuex';
import { ref } from 'vue';
//下单相关逻辑
const useMakeOrderEffect = (shopName,shopId,productList) => {
  const rouetr = useRouter()
  const store = useStore()
  const handleConfirmOrder = async (isCanceled) => {
        const products = []
        for(let i in productList.value){
            const product = productList.value[i]
            products.push({
                id: parseInt(product._id,10), 
                num: product.count
            })
        }
        try {
            const result = await post('/api/order', {
            addressId: 1,
            shopId,
            shopName:shopName.value,
            isCanceled,
            products,
            })
            if (result?.errno === 0) {
                store.commit('clearCartData',shopId)
                rouetr.push({name:'OrderList'})
            } else {
                showToast('请求失败')
            }
            } catch (e) {
            console.log(e);
            showToast('下单失败')
        }
    
    }
    return { handleConfirmOrder }        
}
//蒙层展示相关逻辑
const useShowMaskEffect = () => {
  const showConfirm = ref(false)
  const handleShowConfirmChange = (status) => {
    showConfirm.value = status
  }
  return { handleShowConfirmChange,showConfirm }
}
export default {
    name: 'Order',
    components:{Toast},
    setup(){
        const route = useRoute()
        const shopId = parseInt(route.params.id,10)
        const { show, toastMessage, showToast } = useToastEffect() 
        const { calculations,shopName,productList } = useCommonCartEffect(shopId)
        const { handleConfirmOrder } = useMakeOrderEffect(shopName,shopId,productList)
        const { handleShowConfirmChange,showConfirm } = useShowMaskEffect() 
         return {
            calculations,handleConfirmOrder,show, toastMessage, showToast,handleShowConfirmChange,showConfirm
        }   
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixin';    
.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: .49rem;
  line-height: .49rem;
  background: $bgColor;
  &_price {
    flex: 1;
    text-indent: .24rem;
    font-size: .14rem;
    color: $content-fontcolor;
  }
  &_btn {
    width: .98rem;
    background: $btn-bgColor;
    color: $bgColor;
    text-align: center;
    font-size: .14rem;
  }
}
.mask {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, .5);
  &_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 1.56rem;
    background: $bgColor;
    text-align: center;
    border-radius: .04rem;
    &_title {
      margin: .24rem 0 0 0;
      line-height: .26rem;
      font-size: .18rem;
      color: $content-fontcolor;
    }
    &_desc {
      margin: .08rem 0 0 0;
      font-size: .14rem;
      color: $medium-fontColor;
    }
    &_btns {
      display: flex;
      margin: .24rem .58rem;
    }
    &_btn {
      flex: 1;
      width: .8rem;
      line-height: .32rem;
      border-radius: .16rem;
      font-size: .14rem;
      &--first {
        margin-right: .12rem;
        border: .01rem solid $btn-bgColor;
        color: $btn-bgColor;
      }
      &--last {
        margin-left: .12rem;
        background: $btn-bgColor;
        color: #fff;
      }
    }
  }
}
</style>